---
layout: default
---

<!-- Image to hack wechat -->
<!-- <img src="/img/icon_wechat.png" width="0" height="0"> -->
<!-- <img src="{{ site.baseurl }}/{% if page.header-img %}{% if page.header-img != "none" %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}{% else %}{{ page.date | date: "img/post-bg/%Y/%m-%d-%H.jpg" }}{% endif %}" width="0" height="0"> -->

<!-- Post Header -->
{% include intro-header.html type='post' %}

<!-- Post Content -->
<article>
	<div class="container">
		<div class="row">

	<!-- Post Container -->
			<div class="
				col-lg-8 col-lg-offset-2
				col-md-10 col-md-offset-1
				post-container">

				<!-- Multi-Lingual -->
				{% if page.multilingual %}
				<!-- Language Selector -->
				<select class="sel-lang" onchange= "onLanChange(this.options[this.options.selectedIndex].value)">
					<option value="0" selected> 中文 Chinese </option>
					<option value="1"> 英文 English </option>
				</select>
				{% endif %}

				{{ content }}

				<hr style="visibility: hidden;">
				<ul class="pager">
					{% if page.previous.url %}
					<li class="previous">
						<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">
						Previous<br>
						<span>{{page.previous.title}}</span>
						</a>
					</li>
					{% endif %}
					{% if page.next.url %}
					<li class="next">
						<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">
						Next<br>
						<span>{{page.next.title}}</span>
						</a>
					</li>
					{% endif %}
				</ul>
				<hr style="visibility: hidden;">

				{% include comment.html %}

			</div>

	<!-- Side Catalog Container -->
		{% if page.catalog %}
			<div class="
				col-lg-2 col-lg-offset-0
				visible-lg-block
				sidebar-container
				catalog-container">
				<div class="side-catalog">
					<hr class="hidden-sm hidden-xs">
					<h5>
						<a class="catalog-toggle" href="#">CATALOG</a>
					</h5>
					<ul class="catalog-body"></ul>
				</div>
			</div>
		{% endif %}

	<!-- Sidebar Container -->
			<div class="
				col-lg-8 col-lg-offset-2
				col-md-10 col-md-offset-1
				sidebar-container">

				<!-- Featured Tags -->
				{% include featured-tags.html bottom=true %}

				<!-- Friends Blog -->
				{% include friends.html %}
			</div>
			{% if site.license %}
				{% include license.html %}
			{% endif %}
		</div>
	</div>
</article>

<!-- add support for mathjax by voleking-->
{% if page.mathjax %}
  {% include mathjax_support.html %}
{% endif %}


{% if site.anchorjs %}
<!-- async load function -->
<script>
	function async(u, c) {
		var d = document, t = 'script',
			o = d.createElement(t),
			s = d.getElementsByTagName(t)[0];
		o.src = u;
		if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
		s.parentNode.insertBefore(o, s);
	}
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
	async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
		anchors.options = {
			visible: 'always',
			placement: 'right',
			icon: '#'
		};
		anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
	})
</script>
<style>
	/* place left on bigger screen */
	@media all and (min-width: 800px) {
		.anchorjs-link{
			position: absolute;
			left: -0.75em;
			font-size: 1.1em;
			margin-top : -0.1em;
		}
	}
</style>
{% endif %}
